<template>
  <div class="material-main">
    <el-dialog
      title="选择素材"
      :visible.sync="dialog"
      width="60%"
      @close="handleClose"
      append-to-body
    >
      <div class="content">
        <div class="card">
          <div slot="header">
            <el-upload
              class="btn-upload"
              action="/admin/xy/upload/uploadImg"
              :on-success="handleSucee"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
            <!-- 选择富文本才显示 -->
            <div v-if="type == 1">
              <el-input v-model="selImgUrl" placeholder=""></el-input>
              <el-button @click="handleCopy(selImgUrl, $event)">copy</el-button>
            </div>
          </div>
          <el-pagination
            style="margin-top: 30px; text-align: right"
            :current-page="page.start"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-row :gutter="30">
            <el-col
              class="img-block-fk"
              :span="6"
              v-for="item in imgList"
              :key="item.id"
            >
              <el-card
                @click.native="
                  sel(item.id, baseUrl + '/' + item.dir + '/' + item.fileName)
                "
                class="img-card"
                :class="{ selected: item.id == selId }"
                shadow="hover"
                style="margin-buttom:20px"
              >
                <el-image
                  style="width: 90%; height: 200px"
                  :src="baseUrl + '/' + item.dir + '/' + item.fileName"
                  fit="contain"
                ></el-image>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadList as uploadListApi } from "@/api/repos/fodder";
import clip from '@/utils/clipboard'
import _ from "lodash";
export default {
  name: "material",
  data() {
    return {
      dialog: false,
      imgList: [],
      baseUrl: "http://bufantec.com",
      page: {
        start: 1,
        limit: 12,
        sizes: [12, 24],
      },
      selId: "",
      selImgUrl: "",
      type: 0, // type: 0/1  0  为选择封面 ; 1 为选择内容 . 选择封面需要$emit执行父组件事件,不需要复制,否则需要复制
    };
  },
  methods: {
    openDialog(type) {
      this.type = type;
      console.log(this.type);
      this.dialog = true;
      this.getImgList();
    },
    getImgList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      params = _.pickBy(params, (item) => item);
      uploadListApi(params).then((res) => {
        console.log(res);
        this.imgList = res.data.list;
        this.page.total = res.data.totalRow;
      });
    },
    handleSucee() {
      //成功后刷新列表
      this.getImgList();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.getNewsList();
    },
    handleCurrentChange(val) {
      this.page.start = val;
      this.getNewsList();
    },
    handleClose() {
      //重置图片信息
      this.selId = "";
      this.selImgUrl = "";
      this.dialog = false;
    },
    handleSel() {
      var url = this.selImgUrl;
      this.$emit("handle-cover-sel", url);
      this.handleClose();
    },
    handleCopy(v, event) {
      clip(v, event);
    },
    sel(id, url) {
      this.selId = this.selId == id ? "" : id;
      // 如果选中了才有
      if (this.selId) {
        this.selImgUrl = url;
      } else {
        this.selImgUrl = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.img-block-fk {
  position: relative;
}
.img-block-fk .selected::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "√";
  display: block;
  font-size: 30px;
  color: #67c23a;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>